<template>
  <view class="container">
    <!-- Navigation Bar -->
    <view class="nav-bar">
      <button class="title" @click="openPopup">
		  <text>{{ selectedItem ? selectedItem : '请选择' }}</text>
	  </button>
      <view class="icons">
        <text class="iconfont">&#xe61e;</text>
      </view>
    </view>
	<!-- 弹出层 -->
	<uni-popup type="bottom" ref="popup" :mask-click="true">
	      <view class="popup-content">
	        <view
	          v-for="(item, index) in items"
	          :key="index"
	          class="popup-item"
	          @click="selectItem(index)"
	        >
	          {{ item }}
	          <!-- 如果当前项被选中，显示红色对勾 -->
	          <text v-if="selectedIndex === index" class="check-mark">✔</text>
	        </view>
	      </view>
	</uni-popup>
    <!-- Tabs -->
    <view class="tabs">
      <view class="tab-item2" :class="{ active: currentTab === 0 }" @click="changeTab(0)">
		  <text>全部</text>
	  </view>
      <view class="tab-item3" :class="{ active: currentTab === 1 }" @click="changeTab(1)">
		  <text>待支付</text>
	  </view>
      <view class="tab-item3" :class="{ active: currentTab === 2 }" @click="changeTab(2)">
		  <text>待成交</text>
	  </view>
      <view class="tab-item3" :class="{ active: currentTab === 3 }" @click="changeTab(3)">
		  <text>待出行</text>
	  </view>
      <view class="tab-item4" :class="{ active: currentTab === 4 }" @click="changeTab(4)">
		  <text>退款/售后</text>
	  </view>
    </view>
    <!-- Order List -->    
	<view class="body">
		<view  class="order-list">  
		  <view  class="order-item" v-for="(order, index) in tabs[currentTab]==='全部'?orders:orders.filter(item=>item.type===tabs[currentTab])" :key="index" >
				<view class="order1">
				  <text class="order-name">{{ order.name }}</text>
				  <text class="order-type" :class="{gray:order.type==='已完成'}">{{ order.type }}</text>				  
				</view>
				<view class="order2">
					<view class="order2l">
						<image class="order-img" :src="order.imgUrl"></image>
					</view>
					<view class="order2r">
						<text class="order2r1">{{ order.rooms }}，{{ order.roomName }}</text>
						<text class="order2r2">{{ order.startDate }} ~ {{ order.endDate }}</text>
						<view class="order2rb">
							<text class="order2rb1">¥</text>
							<text class="order2rb2">{{ order.price }}</text>
						</view>
					</view>
				</view>
				<view class="order-time">
					<text class="ot">{{ order.orderTime }}</text>
					<view v-if="order.type==='待支付'" class="buttons">
						<view  class="order-btn1" @click="cancelOrder(order)">
							<text>取消订单</text>
						</view>
						<view  class="order-btn2" @click="payOrder(order)">
							<text>去支付</text>
						</view>
					</view>
					<view v-else-if="order.type==='待成交'" class="buttons">
						<view  class="order-btn13">
							<text></text>
						</view>
						<view  class="order-btn3" @click="payOrder(order)">
							<text>取消订单</text>
						</view>
					</view>
					<view v-else-if="order.type==='退款/售后'" class="buttons">
						<view  class="order-btn13" >
							<text></text>
						</view>
						<view  class="order-btn3" @click="payOrder(order)">
							<text>取消退款</text>
						</view>
					</view>
					<view v-else-if="order.type==='待点评'" class="buttons">
						<view  class="order-btn13" >
							<text></text>
						</view>
						<view  class="order-btn3 ddp" @click="payOrder(order)">
							<text>去评价</text>
						</view>
					</view>
					<view v-else-if="order.type==='已完成'" class="buttons">
						<view  class="order-btn13" >
							<text></text>
						</view>
						<view  class="order-btn3" @click="payOrder(order)">
							<text>再次预定</text>
						</view>
					</view>
					
						
					
				</view>						
		  </view>
		</view>		
	</view>        
  </view>
</template>

<script setup>
import {ref} from 'vue'
const tabs=ref(['全部','待支付','待成交','待出行','退款/售后'])
let  currentTab=ref(0)
const popup=ref(null)
const items=ref(['房源', '活动', '商品', '美食', '旅游'])// 可选择项列表
const selectedIndex=ref(null)
let selectedItem=ref('')
const  orders=ref([
        {
          name: "民宿名称",
          rooms: "1间",
          roomName: "房间名称",
          startDate: "2024.07.24",
          endDate: "2024.07.24",
          price: 160.25,
          orderTime: "2024-05-05 08:33:12",
          imgUrl: "../../static/orders/示例图.png",
		  type: "待支付"
        },
		{
		  name: "民宿名称",
		  rooms: "1间",
		  roomName: "房间名称",
		  startDate: "2024.07.24",
		  endDate: "2024.07.24",
		  price: 160,
		  orderTime: "2024-05-05 08:33:12",
		  imgUrl: "../../static/orders/示例图.png",
		  type: "待成交"
		},
		{
		  name: "民宿名称",
		  rooms: "1间",
		  roomName: "房间名称",
		  startDate: "2024.07.24",
		  endDate: "2024.07.24",
		  price: 160,
		  orderTime: "2024-05-05 08:33:12",
		  imgUrl: "../../static/orders/示例图.png",
		  type: "待出行"
		},
		{
		  name: "民宿名称",
		  rooms: "1间",
		  roomName: "房间名称",
		  startDate: "2024.07.24",
		  endDate: "2024.07.24",
		  price: 160,
		  orderTime: "2024-05-05 08:33:12",
		  imgUrl: "../../static/orders/示例图.png",
		  type: "退款/售后"
		},
		{
		  name: "民宿名称",
		  rooms: "1间",
		  roomName: "房间名称",
		  startDate: "2024.07.24",
		  endDate: "2024.07.24",
		  price: 160,
		  orderTime: "2024-05-05 08:33:12",
		  imgUrl: "../../static/orders/示例图.png",
		  type: "待点评"
		},
		{
		  name: "民宿名称",
		  rooms: "1间",
		  roomName: "房间名称",
		  startDate: "2024.07.24",
		  endDate: "2024.07.24",
		  price: 160,
		  orderTime: "2024-05-05 08:33:12",
		  imgUrl: "../../static/orders/示例图.png",
		  type: "已完成"
		}        
      ])
	  
function changeTab(tabIndex) {
      currentTab.value = tabIndex;
	  console.log(tabs.value[currentTab.value])
      // Logic to change the displayed orders based on the selected tab
    }
function cancelOrder(order) {
      // Logic to cancel the order
    }
function payOrder(order) {
      // Logic to initiate payment
    }
function openPopup() {
      popup.value.open()
    }
    // 选择某一项
function selectItem(index) {
      selectedIndex.value = index
	  selectedItem.value=items.value[index]
	  console.log('index',selectedIndex.value)
	  console.log(selectedItem.value)
      // 可以添加逻辑关闭弹出层
      popup.value.close()
    }
</script>
<style scoped lang='scss'>
.container {
  padding-bottom: 60px; /* For bottom navigation */
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  width: 750rpx;
  height: 98rpx;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  .title {
	  width: 144rpx;
	  height: 44rpx;
	  font-family: PingFang SC, PingFang SC;
	  font-weight: 600;
	  font-size: 32rpx;
	  color: #222222;
	  margin-left:20rpx;	  
	  line-height: 38rpx;
	  text-align: center;
	  font-style: normal;
	  text-transform: none;
  }
}






.tabs {
	width: 750rpx;
	height: 98rpx;
	display:flex;
	justify-content: space-between;
	align-items: center;
	.tab-item2 {
		width: 72rpx;
		height: 98rpx;
		display:flex;
		justify-content: center;
		align-items: center;
		padding-left:24rpx;
		text {
			width: 72rpx;
			height: 50rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		
	};
	.tab-item3 {
		width: 96rpx;
		height: 98rpx;
		padding-left:48rpx;
		display:flex;
		justify-content: center;
		align-items: center;
		text {
			width: 96rpx;
			height: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;			
			color: #555555;
			line-height: 38rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	};
	.tab-item4 {
		width: 144rpx;
		height: 98rpx;
		display:flex;
		justify-content: center;
		align-items: center;
		text {
			width: 144rpx;
			height: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #555555;
			line-height: 38rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
		
}

.body {
	width: 750rpx;
	height: 2128rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	.order-item {
		width: 702rpx;
		height: 328rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		.order1 {
			width: 654rpx;
			height: 40rpx;
			display:flex;
			justify-content: space-between;
			align-items: center;
			.order-name {
				width: 224rpx;
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			};
			.order-type {
				width: 84rpx;
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #E60012;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			};
			.order-type.gray {
				color:#888888;
			}			
		};
		.order2 {
			display:flex;
			justify-content: space-between;
			align-items: center;
			position:relative;
			.order2l {
				width:128rpx;
				height:128rpx;
				padding-left:32rpx;
			}
			.order2r {
				width: 510rpx;
				height: 128rpx;
				padding-left:24rpx;
				display:flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: left;				
				padding-left:48rpx;
				.order2r1 {
					width: 180rpx;
					height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					line-height: 33rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					white-space: nowrap;
				};
				.order2r2 {
					padding-top:30rpx;
					width: 282rpx;
					height: 34rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #555555;
					line-height: 28rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					white-space: nowrap;
				};
				.order2rb {
					width:150rpx;
					height:82rpx;
					padding-top:30rpx;
					.order2rb1 {
						width: 28rpx;
						height: 34rpx;
						font-family: DIN, DIN;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					};
					.order2rb2 {
						width: 108rpx;
						height: 44rpx;
						font-family: DIN, DIN;
						font-weight: bold;
						font-size: 36rpx;
						color: #222222;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
				
				
			}
			
		};
		.order-time {
			width: 654rpx;
			height: 64rpx;
			display: flex;			
			justify-content: space-between;
			align-items: center;
			padding-top:24rpx;
			.ot {
				width: 248rpx;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #888888;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			};
			.buttons {
				width: 332rpx;
				height: 64rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;				
				.order-btn1 {
					width: 154rpx;
					height: 64rpx;
					border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
					border: 1rpx solid #DDDDDD;
					display: flex;
					justify-content: center;
					align-items: center;
					text {
						width: 112rpx;
						height: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #222222;
						line-height: 33rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				};
				.order-btn2 {
					width: 154rpx;
					height: 64rpx;
					border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
					border: 1rpx solid #E60012;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right:10rpx;
					text {
						width: 84rpx;
						height: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						white-space: nowrap;
						color: #E60012;
						line-height: 33rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}		
	}
}
.order-btn3 {
					width: 154rpx;
					height: 64rpx;
					border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
					border: 1rpx solid #E60012;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right:10rpx;
					text {
						width: 84rpx;
						height: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						white-space: nowrap;
						color: #E60012;
						line-height: 33rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
						margin-left:-25rpx;
					}
				}
.order-btn13 {
	border:none;
}
.order-btn3.ddp {
	text {
		margin-left:0rpx;
	}
}

.title {
  font-size: 16px;
  font-weight: bold;
}
.popup-content {
  padding: 10px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
}

.popup-item {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

/* 红色对勾样式 */
.check-mark {
  color: red;
  font-size: 20px;
}


.icons {
  font-size: 20px;
}



.order-list {
  padding: 10px;
  background-color: #f5f5f5;
}

.order-item {
  display: flex;
  background-color: #fff;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 4px;
  align-items: center;
}

.order-img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.order-details {
  flex: 1;
}

.order-name {
  font-size: 16px;
  font-weight: bold;
}

.order-info,
.order-dates,
.order-price,
.order-time {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.order-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.order-btn {
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #ddd;
  font-size: 12px;
  margin-top: 5px;
}



.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.nav-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: #666;
}

.nav-item.active {
  color: red;
}
</style>
